<template>
	<view class="pg">
		<!-- 搜索框 -->
		<sc-search id="search" @search="searchTap"></sc-search>
		<classify-one id="select" v-if="style == 1" :searchHeight="searchHeight" :classList="classList"></classify-one>
		<classify-two v-else-if="style == 3" 
			:searchHeight="searchHeight" 
			:con="con" 
			@scrollBottom="scrollBottom" 
			@change="changeData" 
			:goodList="goodList" 
			:classList="classList" 
			@classfly="classfly" 
			@todetail="todetail">
		</classify-two>
		<classify-three v-else-if="style == 4" 
		    :searchHeight="searchHeight"
			:classList="classList">
	    </classify-three>
		<classify-four v-else-if="style == 2" 
		    :searchHeight="searchHeight"
			:classList="classList">
		</classify-four>
		<!-- 加入购物车 底部结算-->
		<!-- <view class="bottom">
			<view class="bottom_pay">
				去结算
			</view>
			<view class="bottom_price">
				<view class="bottom_price_pic">
					<view class="badge">
						<view class="badge_item">
							16
						</view>
					</view>
					<image src="../../static/image/mine/index/cartnum.png" mode=""></image>
				</view>
				<view class="all_price">
					合计： ￥17.4
				</view>
				<view class="favorable">
					已优惠： ￥0.00
				</view>
			</view>
		</view> -->
		<shop-loading v-if="shopLoad"></shop-loading>
	</view>
</template>

<script>
	import classifyOne from "@/components/classify/classifyone.vue"
	import classifyTwo from "@/components/classify/classifytwo.vue"
	import classifyThree from "@/components/classify/classifythree.vue"
	import classifyFour from "@/components/classify/classifyfour.vue"
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	import scSearch from '../components/sc-search.vue'
	import { classify,classifyGoods } from '@/common/index.js';
	export default {
		components:{
			classifyOne,
			classifyTwo,
			uniBadge,
			scSearch,classifyThree,classifyFour
		},
		data () {
			return {
				search_content:'',
				searchHeight:null,
				winHeight:0,
				style:1,
				classList:null,
				level:0,
				page:1,
				type_id:0,
				price:0,
				sales:0,
				goodList:[],
				shopLoad:true,
				con:{
					loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
					contentText: {
						contentdown:'上拉加载更多',
						contentrefresh: '正在加载...',
						contentnomore: '到底了~',
					},
				}
			}
		},
		mounted(){
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
					const query = uni.createSelectorQuery()
					query.select('#search').boundingClientRect(data => {
						that.searchHeight = res.windowHeight - data.height;
						
						// uni.setStorageSync('searchHeight',data.height)
					}).exec();
			    }
			});
		},
		onLoad() {
			this.classifyList()
		},
		onShow() {
			this.$store.commit('CART_NUM');
		},
		methods: {
			searchTap(){
				// console.log('ddd')
				uni.navigateTo({
					url: '/pageB/classify/classProduct'
				})
			},
			scrollBottom(){
				console.log('[dd]')
				this.newData()
			},
			//跳转详情
			todetail(item){
				uni.navigateTo({
					url:'/pageB/classify/productdetail?id='+item.id+'&type=1'
				})
			},
			//请求右侧数据
			classfly(item){
				this.type_id = item.id;
				this.sales = 0;
				this.price = 0;
				this.page = 1;
				this.classifyGoods()
			},
			//商品筛选条件
			changeData(index,type){
				console.log(index,type)
				this.sales = index;
				this.price = type;
				this.page = 1;
				this.classifyGoods()
			},
			//初始数据
			classifyList(){
				this.shopLoad = true;
				classify().then(res=>{
					if(res.code == 1){
					   const data = res.msg.classify;
					   // console.log(data)
					   const style = res.msg.style
					   if(style == 3){
						   // console.log(data)
							const list = res.msg.goods;
							this.type_id = data[0].id;
							if(list.data.length){
							   this.goodList = list.data;
							   this.con.loadingType = list.last_page > 1 ? 0 : 2;
							   this.page++;
							}
							this.classList = data;
					   }else if(style == 1){
						   // console.log(data)
						   this.classList = JSON.parse(JSON.stringify(data))
					   }else if(style == 4 || style == 2){
						   this.classList = JSON.parse(JSON.stringify(data))
					   }
					   this.style = style;
					   this.level = res.msg.level;
					   this.shopLoad = false;
					}else{
						this.toast(res.msg)
						this.shopLoad = false;
					}
				}).catch()
			},
			classifyGoods(){
				const {page,sales,price,type_id} = this;
				let params = {
					page,
					sales,
					price,
					type_id
				}
				classifyGoods(params).then(res=>{
					if(res.code == 1){
						const data = res.msg.data;
						if(data.length){
							this.goodList = data;
							this.con.loadingType = res.msg.last_page > 1 ? 0 : 2;
							this.page++;
						}else{
							this.goodList = [];
						}
					}
				}).catch()
			},
			newData(){
				if (this.con.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.con.loadingType = 1;
				const {page,sales,price,type_id} = this;
				let params = {
					page,
					sales,
					price,
					type_id
				}
				classifyGoods(params).then(res=>{
					if(res.code == 1){
						const data = res.msg.data;
						if(data.length){
							this.goodList = this.goodList.concat(data);
							this.con.loadingType = 0;
							this.page++;
						}else{
							this.con.loadingType = 2;
						}
					}
				}).catch()
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/scss/classify/classify.less');
</style>
